<!--  -->
<template>
  <div class="goodslist">
        <!-- <HeaderTop title="珍馐坊"></HeaderTop> -->
        <ul class='selections'> 
          <li @click.prevent='filter(1)' :class="{'active':this.choose==1}">综合</li>
          <li @click.prevent='filter(3)' :class="{'active':this.choose==3}">销量</li>
          <li @click.prevent='filter(5)' :class="{'active':this.choose==5}">新品</li>
          <li @click.prevent='filter2()' :class="{'active':this.choose==7||this.choose==8}">价格
            <img class="arrow"  v-if='this.choose == 8 && down == false' src="./img/arrow.png"/>
            <img class="arrow" v-else-if='this.choose!=7&&this.choose!=8' src="./img/arrow2.png"/>
            <img class="arrow" v-else-if="this.choose == 7 && down == true" src="./img/arrow1.png" />
          </li> 
        </ul>
            <div v-if='this.choose==1' class="recommend_list_box box1" ref='wrapper'  :style="{ height: wrapperHeight + 'px' }">
              <mt-loadmore :top-method="loadTop" :bottom-method="loadBottomUse" :bottom-all-loaded="allLoaded"  :bottom-drop-text='bottomText' ref="loadmore">
              <ul class="recommend_list_ul" ref="content" :style="{height:'auto',marginBottom: '10px',minHeight: wrapperHeight + 'px'}">
                <li class="recommend_list_li" v-for="(item,index) in defaultGoodsList" :key="index" >
                  <a href="javascript:;">
                    <div class="top-wrapper">
                      <div class="top" @click="goToGoodsDetail(item.id)" :style="{backgroundImage:'url(' + item.coverImg + ')'}">
                        <!-- <img :src="item.coverImg" alt=""> -->
                      </div>
                    </div>
                    <div class="bottom">
                      <div class="bottom_left">
                        <h3>{{item.goodsName}}</h3>
                        <p>{{item.profile}}</p>
                      </div>
                      <div class="bottom_right">
                        <h2>
                          <!-- <span>{{item.price}}</span> -->
                          <span class="span1">￥{{item.price.toString().split(".")[0]}}</span>
                          <span class="span2" v-if="item.price.toString().split('.')[1]">.{{item.price.toString().split(".")[1]}}</span>
                        </h2>
                        <button @click="buyNow(item.id)">立即购买</button>
                      </div>
                    </div>
                  </a>
                </li>
              </ul>
              </mt-loadmore>
               <p v-if="allLoaded&&(this.choose==1)" class='allloaded'>已加载全部</p>
            </div>
           <div v-if='this.choose==3' class="recommend_list_box box2" ref='wrapper' :style="{ height: wrapperHeight + 'px' }" >
              <mt-loadmore :top-method="loadTop" :bottom-method="loadBottomUse" :bottom-all-loaded="allLoaded"  :bottom-drop-text='bottomText' ref="loadmore1">
              <ul class="recommend_list_ul" ref="content" :style="{height:'auto',marginBottom: '10px',minHeight: wrapperHeight + 'px'}">
                <li class="recommend_list_li" v-for="(item,index) in defaultGoodsList" :key="index" >
                  <a href="javascript:;">
                    <div class="top-wrapper">
                      <div class="top" @click="goToGoodsDetail(item.id)" :style="{backgroundImage:'url(' + item.coverImg + ')'}">
                        <!-- <img :src="item.coverImg" alt=""> -->
                      </div>
                    </div>
                    <div class="bottom">
                      <div class="bottom_left">
                        <h3>{{item.goodsName}}</h3>
                        <p>{{item.profile}}</p>
                      </div>
                      <div class="bottom_right">
                        <!-- <h2>￥<span>{{item.price}}</span></h2> -->
                        <h2>
                          <!-- <span>{{item.price}}</span> -->
                          <span class="span1">￥{{item.price.toString().split(".")[0]}}</span>
                          <span class="span2" v-if="item.price.toString().split('.')[1]">.{{item.price.toString().split(".")[1]}}</span>
                        </h2>
                        <button @click="buyNow(item.id)">立即购买</button>
                      </div>
                    </div>
                  </a>
                </li>

              </ul>
              </mt-loadmore>
               <p v-if="allLoaded&&(this.choose==3)" class='allloaded'>已加载全部</p>
           </div>
           <div v-if='this.choose==5' class="recommend_list_box box3" ref='wrapper' :style="{ height: wrapperHeight + 'px' }" >
              <mt-loadmore :top-method="loadTop" :bottom-method="loadBottomUse" :bottom-all-loaded="allLoaded"  :bottom-drop-text='bottomText' ref="loadmore2">
              <ul class="recommend_list_ul" ref="content" :style="{height:'auto',marginBottom: '10px',minHeight: wrapperHeight + 'px'}">
                <li class="recommend_list_li" v-for="(item,index) in defaultGoodsList" :key="index">
                  <a href="javascript:;">
                    <div class="top-wrapper">
                      <div class="top" @click="goToGoodsDetail(item.id)" :style="{backgroundImage:'url(' + item.coverImg + ')'}">
                        <!-- <img :src="item.coverImg" alt=""> -->
                      </div>
                    </div>
                    <div class="bottom">
                      <div class="bottom_left">
                        <h3>{{item.goodsName}}</h3>
                        <p>{{item.profile}}</p>
                      </div>
                      <div class="bottom_right">
                        <!-- <h2>￥<span>{{item.price}}</span></h2> -->
                        <h2>
                          <!-- <span>{{item.price}}</span> -->
                          <span class="span1">￥{{item.price.toString().split(".")[0]}}</span>
                          <span class="span2" v-if="item.price.toString().split('.')[1]">.{{item.price.toString().split(".")[1]}}</span>
                        </h2>
                        <button @click="buyNow(item.id)">立即购买</button>
                      </div>
                    </div>
                  </a>
                </li>

              </ul>
              </mt-loadmore>
              <p v-if="allLoaded&&(this.choose==5)" class='allloaded'>已加载全部</p>
           </div>
           <div v-if='this.choose==7||this.choose==8' class="recommend_list_box box3" ref='wrapper' :style="{ height: wrapperHeight + 'px' }" >
              <mt-loadmore :top-method="loadTop" :bottom-method="loadBottomUse" :bottom-all-loaded="allLoaded"  :bottom-drop-text='bottomText' ref="loadmore3">
              <ul class="recommend_list_ul" ref="content" :style="{height:'auto',marginBottom: '10px',minHeight: wrapperHeight + 'px'}">
                <li class="recommend_list_li" v-for="(item,index) in defaultGoodsList" :key="index" >
                  <a href="javascript:;">
                    <div class="top-wrapper">
                      <div class="top" @click="goToGoodsDetail(item.id)" :style="{backgroundImage:'url(' + item.coverImg + ')'}">
                        <!-- <img :src="item.coverImg" alt=""> -->
                      </div>
                    </div>
                    <div class="bottom">
                      <div class="bottom_left">
                        <h3>{{item.goodsName}}</h3>
                        <p>{{item.profile}}</p>
                      </div>
                      <div class="bottom_right">
                        <!-- <h2>￥<span>{{item.price}}</span></h2> -->
                        <h2>
                          <!-- <span>{{item.price}}</span> -->
                          <span class="span1">￥{{item.price.toString().split(".")[0]}}</span>
                          <span class="span2" v-if="item.price.toString().split('.')[1]">.{{item.price.toString().split(".")[1]}}</span>
                        </h2>
                        <button @click="buyNow(item.id)">立即购买</button>
                      </div>
                    </div>
                  </a>
                </li>
              </ul>
              </mt-loadmore>
               <p v-if="allLoaded&&(this.choose==7||this.choose==8)" class='allloaded'>已加载全部</p>
           </div>
  </div>
</template>

<script>
// import HeaderTop from '../../components/HeaderTop/HeaderTop'
import {MessageBox} from 'mint-ui'
import BScroll from 'better-scroll'
import { Loadmore } from 'mint-ui'
export default {
  data () {
    return {
      active:0,
      defaultGoodsList:[],
      saleGoodsList:[],
      newGoodsList:[],
      priceGoodsList:[],
      priceDownGoodsList:[],
      showDown:false,
      moduleId:5,
      theModuleId:null,
      property:'ALL',
      searchProperty:1,
      choose:1,
      showGoods:'',
      size:12,
      num:1,
      currentPage:1,
      allLoaded:false,
      autofill:false,
      bottomText:"上拉加载更多",
      loadMoreConfig:{
        bottomDistance:100,
        autoFill:false,
      },
      down:false,
      wrapperHeight:'100%'
    };
  },

  components: {
    // HeaderTop,
    'mt-loadmore':Loadmore
  },
  mounted(){
    this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
  },
  computed: {},
  created(){
    this.property = this.$route.query.s
    this.moduleId = this.$route.query.moduleId
    console.log('s',this.property)
    this.initGoods();
  },
  methods: {
    async buyNow(id){
      if(localStorage.getItem('token')){
        const params = {
          userId: localStorage.getItem('userId'),
          token: localStorage.getItem('token'),
          goodsId: id,
          num: 1
        }
        const result = await this.API.reqAddTbCart(params)
        this.$store.state.shopIdArray = [result.retData]
          console.log('vuex第一次存',this.$store.state.shopIdArray)
          this.$router.push({
              path: '/confirmorder',
              // zml - 立即购买递交参数
              params: {
                  isDel: true
              }
          })
      }else{
        MessageBox({
            title:'温馨提示',
            message:'您还没有登录,先去登录吧~',
            showCancelButton:true,
            confirmButtonText:'登录',
            cancelButtonText:'取消'
        }).then(action => {
            if(action == 'confirm'){
                console.log(action)
                localStorage.setItem('token', '')
                localStorage.setItem('userId', '')
                localStorage.setItem('userInfo','')
                this.$store.dispatch('logout',{userId:this.userId,token:this.token})
                this.$router.replace('/login')
            }else{
                console.log(action)
            }
        })
      }
    },
    // 点击去商品详情页
    goToGoodsDetail(id){
      console.log(id)
      this.$router.push({path:'/goodsdetail', query:{id:id}})
    },

    // 进入页面 初始化综合商品的数据
    async initGoods(){
      // this.defaultGoodsList = []
      // if(this.searchProperty && this.theModuleId){
      //   this.moduleId = 5
      // }else{
      //   this.property = 1
      // }
      // if(this.theModuleId){
      //   this.moduleId = this.theModuleId
      // }
      console.log(this.moduleId,this.property,this.choose,this.currentPage,this.size)
      let result = await this.API.reqGoodsList({moduleId:this.moduleId,property:this.property,choose:this.choose,num:this.currentPage,size:this.size}) // 综合
      console.log(result)
      if(result.retCode== "000"&&result.retData.length>0){
        this.defaultGoodsList = result.retData
      }else{
        this.isHaveMore(false)
      }
      
    },

    //获取更多数据
   async getListDataPull(){
     console.log('num',this.currentPage)
     let result = await this.API.reqGoodsList({moduleId:this.moduleId,property:1,choose:this.choose,num:this.currentPage,size:this.size}) 
     console.log(result)
     if(result.retData==''||result.retData==[]||result.retData==null){
        this.isHaveMore(false) //禁止上拉
     }else{
        this.defaultGoodsList = this.defaultGoodsList.concat(result.retData?result.retData:[]);
        this.isHaveMore(true)
     }
   },
    //下拉刷新
   loadTop(){
       let self = this;
       this.currentPage = 1;
        setTimeout(function(){
          self.initGoods();
          if(self.choose==1){
            self.$refs.loadmore.onTopLoaded();
          }else if(self.choose == 3){
            self.$refs.loadmore1.onTopLoaded();
          }else if(self.choose == 5){
            self.$refs.loadmore2.onTopLoaded();
          }else if(self.choose == 7||self.choose == 8){
            self.$refs.loadmore3.onTopLoaded();
          }
          
        },1000)
   },
   // 上拉加载
   loadBottomUse(){
        let self = this;
        self.currentPage ++;
        console.log('loadmore',this.currentPage)
        setTimeout(function(){
          // if(self.$refs.loadmore){
            if(self.choose == 1 && self.$refs.loadmore){
              self.$refs.loadmore.onBottomLoaded();
            }else if(self.choose == 3 && self.$refs.loadmore1){
               self.$refs.loadmore1.onBottomLoaded();
            }else if(self.choose == 5 && self.$refs.loadmore2){
              self.$refs.loadmore2.onBottomLoaded();
            }else if((self.choose == 7 || self.chose == 8) && self.$refs.loadmore3){
               self.$refs.loadmore3.onBottomLoaded();
            }  
          // }
          self.getListDataPull();
        },1000)
   },
   isHaveMore(isHaveMore){
        this.allLoaded = true; //true是禁止上拉加载
        if(isHaveMore){
          this.allLoaded = false;
        }
      },
   filter(choose){
     console.log('filter',choose)
     this.choose = choose;
     this.currentPage = 1;
     this.isHaveMore(true);
     this.initGoods();
   },
   filter2(){  
     this.down = !this.down
     if(this.down){
       this.choose = 7
     }else {
       this.choose = 8 
     }
     this.filter(this.choose)
   }
  }
}

</script>
<style lang='stylus' scoped>
@import "../../common/stylus/mixins.styl"
  .goodslist
    // margin-top 45px
    width 100%
    height 100%
    padding-bottom 0 !important
    background url(../../assets/img/bg.png)
    overflow hidden
    .selections
      width:100%
      display flex
      justify-content space-around
      align-items center
      height 20px
      line-height 20px
      padding-bottom 10px
      padding-top 10px
      background-color #fff 
      li
        font-size 14px
        line-height 20px
        display flex
        align-items center
        &.active
          color red
        img
          width 12px
          height 18px
          margin-left 5px
        
    .allloaded
       width 100%
       text-align center
    .recommend_list_box
          width 100%
          height 100%
          // margin-bottom 60px
          overflow-y scroll 
          .recommend_list_ul
            // width 100%
            height auto
            display flex
            justify-content space-between
            padding 0 20px 20px
            flex-wrap wrap
            .recommend_list_li
              margin-top 20px
              display flex
              flex-direction column
              align-items center
              // height 250px
              width 158px
              .top-wrapper
                height 185px
                width 148px
                padding 5px
                border 1px solid #748C32
                .top
                  height 185px
                  width 148px
                  overflow hidden
                  display inline-block
                  background-size cover
                  background-repeat no-repeat
                  background-position center center
                  // margin-top 5px
                  // margin-left 5px
                  // img
                  //   min-height 190px
                  //   min-width 148px
                  //   margin-left:50%
                  //   margin-top:50%
                  //   transform:translate(-50%,-50%)
              .bottom
                display flex
                justify-content space-between
                margin-top 8px
                font-size 12px
                .bottom_left
                  width 88px
                  // margin-right 10px
                  h3
                    white-space nowrap
                    text-overflow ellipsis
                    overflow hidden
                    padding-bottom 4px
                    border-bottom 2px solid #748C32
                    font-size 14px
                    color #000
                  p
                    margin-top 2px
                    white-space nowrap
                    text-overflow ellipsis
                    overflow hidden
                .bottom_right
                  // margin-top -10px
                  h2
                    color #145B3E
                    font-weight bold
                    text-align center
                    font-weight bold
                    .span1
                      font-size 18px
                      font-weight bold
                    .span2
                      font-size 10px
                      font-weight bold
                  button
                    margin 0
                    margin-top 3px
                    padding 4px 10px
                    border 1px solid transparent
                    outline none
                    color #ffffff
                    background #748C32
                    border-radius 5px
                    font-size 9px
</style>